<template>
  <!-- 评论列表组件 -->
  <div class="commentList">
    <!-- 分页列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- 评论列表 -->
      <van-cell v-for="(item,index) in commentList" :key="index" :title="index">
        <van-image slot="icon" round class="commentImg" :src="item.aut_photo" />
        <span style="color: #466b9d;" slot="title">{{item.aut_name}}</span>
        <div slot="label">
          <p style="color: #363636;">{{item.content}}</p>
          <p>
            <span class="commentTxt">{{item.pubdate|relativeTime}}</span>
            <van-button
              size="mini"
              @click="huifu(item.com_id)"
              type="default"
            >回复 {{ item.reply_count }}</van-button>
          </p>
        </div>
        <van-icon
          slot="right-icon"
          :class="{active_zan:item.is_liking}"
          :name="item.is_liking? 'like':'like-o'"
          @click="dianzan(item.com_id,item.is_liking,index)"
        />
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import {
  getArticleComments,
  comment_reply_dianzan,
  comment_reply_delDianzan,
} from "@/api/axios";
export default {
  name: "commentList",
  data() {
    return {
      offset: null,
      loading: false, //停止加载
      finished: false, //停止请求
    };
  },
  props: {
    articleID: {
      type: [Number, String, Object],
      required: true, //必须有，，否则报错
    },
    commentList: {
      type: [Array],
      required: true, //必须有，，否则报错
    },
  },
  methods: {

  // 获取文章列表
    async onLoad() {

      const { data: res } = await getArticleComments({
        type: "a",
        source: this.articleID,
        offset: this.offset,
        limit: 10,
      });
      this.commentList.unshift(...res.data.results);
      console.log(res, '评论列表');
      this.$emit("set_total_count", res.data.total_count);

      this.loading = false;
      if (res.data.results.length == 0) {
        // 如果没有数组则停止加载
        this.finished = true;
      } else {
        // 如果还有数据则翻页。，，请求下一页的数据
        this.offset = res.data.last_id;
      }
    },
    // 评论点赞
    async dianzan(id, type, index) {
      try {
        if (type) {
          // 执行取消点赞
          const { data: res } = await comment_reply_delDianzan(id);
          this.commentList[index].is_liking = !type;
          this.$toast.success("取消成功");
        } else {
          // 执行点赞
          const { data: res } = await comment_reply_dianzan(id);
          this.commentList[index].is_liking = !type;
          this.$toast.success("点赞成功");
        }
      } catch (err) {
        console.log(err);
        this.$toast.fail("服务器错误稍后重试！");
      }
    },
    // 回复
    huifu() {
      console.log("点击回复");
      this.$emit("show-reply-popup");
    },
  },
  created() {
    // this.getComments();
    this.loading = true;
    this.onLoad();
    console.log(this.commentList,100);
    
  },
};
</script>
<style lang="less" scoped>
.commentList {
  .commentImg {
    width: 100px;
    height: 100px;
    display: block;
  }
  .van-cell__title {
    margin-left: 20px;
    .commentTxt {
      margin-right: 10px;
    }
  }
  .van-icon {
    &.active_zan {
      color: #ff3513;
    }
  }
}
</style>